{% extends "::base.html.twig" %}

{% block bundleContent %}

    {% block content %}

	<!-- BEGIN CONTENT WRAPPER -->
	<div id="content-wrapper" class="content-wrapper">
		<div class="container">
			
			
			{# Button block #}
			<div class="grid_12">
				<h3>Comment &ccedil;a marche ?</h3>
				<div class="howto_div_button">	
					<button id='create_button'>Comment cr&eacute;er un &eacute;v&eacute;nement ?</button>
					<button id='participate_button'>Comment participer ?</button>
				</div>
			</div>
			
			<div class="grid_12">
				{# Create block #}
				<div id='create' style='display: block;'>
					<table border='0' cellspacing='0' cellpadding='0'>
						<tr>
							<td width='300'>
								<div class='howto_div_image'>
									<img src="{{ asset('images/parents.png') }}" alt="" width="130" height="130" />
								</div>
							</td>
							<td width='600'>
								<div class='howto_div_text'>
									<span class='howto_span_text_title'>Vous attentez un enfant ?</span><br />
									<span class='howto_span_text_text'>
										Vous allez avoir un enfant ? Pourquoi ne pas cr&eacute;er un &eacute;v&eacute;nement autour de la naissance de votre futur bout d'chou ?
									</span>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class='howto_div_image'>
									<img src="{{ asset('images/create_participate.png') }}" alt="" width="130" height="130" />
								</div>
							</td>
							<td>
								<div class='howto_div_text'>
									<span class='howto_span_text_title'>Cr&eacute;ez une naissance</span><br />
									<span class='howto_span_text_text'>
										Inscrivez-vous sur BetMyBirth, c'est gratuit et &ccedil;a ne prend qu'une minute.<br />
										Une fois votre inscritption valid&eacute;e, connectez-vous et cr&eacute;ez un &eacute;v&eacute;nement.
									</span>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class='howto_div_image'>
									<img src="{{ asset('images/invite.png') }}" alt="" width="150" height="130" />
								</div>
							</td>
							<td>
								<div class='howto_div_text'>
									<span class='howto_span_text_title'>Invitez vos proches</span><br />
									<span class='howto_span_text_text'>
										Sur la page de l'&eacute;v&eacute;nement, invitez vos proches &agrave; participer.<br />
										Pour cela vous pouvez soit renseigner les adresses mail de vos proches en utilisant le bouton "Invitez", <br />
										soit partager la naissance sur Facebook en cliquant sur le bouton "Partagez".
									</span>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class='howto_div_image'>
									<img src="{{ asset('images/results.png') }}" alt="" width="150" height="120" />
								</div>
							</td>
							<td>
								<div class='howto_div_text'>
									<span class='howto_span_text_title'>Fermez l'&eacute;v&eacute;nement</span><br />
									<span class='howto_span_text_text'>
										Une fois que votre enfant est n&eacute;, vous pouvez fermer l'&eacute;v&eacute;nement.<br />
										Nous vous dirons qui est le vainqueur !
									</span>
								</div>
							</td>
						</tr>
					</table>
				</div>

				{# Participate block #}
				<div id='participate' style='display: none;'>
					<table border='0' cellspacing='0' cellpadding='0'>
						<tr>
							<td width='300'>
								<div class='howto_div_image'>
									<img src="{{ asset('images/click.png') }}" alt="" width="130" height="130" />
								</div>
							</td>
							<td width='600'>
								<div class='howto_div_text'>
									<span class='howto_span_text_title'>Utilisez le lien de l'&eacute;v&eacute;nement</span><br />
									<span class='howto_span_text_text'>
										Pour participer, cliquez sur le lien que vous avez re&ccedil;u dans le mail d'invitation ou sur Facebook.
									</span>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class='howto_div_image'>
									<img src="{{ asset('images/create_participate.png') }}" alt="" width="130" height="130" />
								</div>
							</td>
							<td>
								<div class='howto_div_text'>
									<span class='howto_span_text_title'>Participez !</span><br />
									<span class='howto_span_text_text'>
										Rien de plus simple, pas besoin de vous inscrire et c'est gratuit !<br />
										Essayer de deviner la date de naissance, le poids, la taille et le sexe du futur b&eacute;b&eacute; <br />
										en remplissant les champs du formulaire sur la page de l'&eacute;v&eacute;nement.
									</span>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class='howto_div_image'>
									<img src="{{ asset('images/results.png') }}" alt="" width="150" height="130" />
								</div>
							</td>
							<td>
								<div class='howto_div_text'>
									<span class='howto_span_text_title'>Visualisez les r&eacute;sultats</span><br />
									<span class='howto_span_text_text'>
										Vous pouvez voir les votes des autres participants et les r&eacute;sultats d&egrave;s que le b&eacute;b&eacute; sera n&eacute;.<br />
										Le vainqueur sera averti s'il a renseign&eacute; son email au moment de voter.
									</span>
								</div>
							</td>
						</tr>
					</table>
				</div>
			</div>
			
		</div>
	</div>
	
	<script type='text/javascript'>
		$(document).ready(function() {
			$('#create_button').click(function(){
				$('#participate').css('display', 'none');
				$('#create').css('display', 'block');
			});

			$('#participate_button').click(function(){
				$('#create').css('display', 'none');
				$('#participate').css('display', 'block');
			});
		});
	</script>

    {% endblock %}

{% endblock %}
